<template>
  <el-dialog :visible.sync="show" @open="open" title="隐患详情" :append-to-body="true" width='65%' :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="timeline-container"  v-if="history.length" >
      <!-- 上报工单历史记录 -->
      <div class="timeline-item" v-if="detail.actNodeCode === 'finish'&&detail.handleMethod !== 2" style="height: 0.5rem;">
        <div class="item-title">
          <i class="circle active"></i>
          <div class="step">完成</div>
        </div>
      </div>
      <template v-for="(item, index) in history">
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_01'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>上报内容</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">所属单位：</div><div class="content text-ellipsis">{{detail.deptName}}</div>
              </div>
              <div class="info-item">
                <div class="label">设备类型：</div><div class="content">{{detail.deviceTypeName}}</div>
              </div>
              <div class="info-item">
                <div class="label">设备状态：</div><div class="content">{{detail.deviceStatusName}}</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <div class="label">处理方式：</div><div class="content">上报工单</div>
              </div>
              <div class="info-item">
                <div class="label">上报人：</div><div class="content">{{detail.createUserName}}</div>
              </div>
              <div class="info-item">
                <div class="label">联系方式：</div><div class="content">{{detail.createUserPhone}}</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">隐患内容：</div><div class="content infoDiv">{{item.reportContent}}</div>
              </div>
            </div>
            <div class="info-row" v-if="item.reportImgs">
              <div class="image-box">
                <el-image
                  v-for="(img, idx) in item.reportImgs.split(',')"
                  class="img"
                  :key="idx"
                  :src="urlText+'/admin/sys-file/' + img"
                  :alt="img"
                  :preview-src-list="[urlText+'/admin/sys-file/' + img]"
                  :z-index="998"
                >
                </el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_02'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>隐患审核</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
            <div v-if="item.handleResult === 1" style="color:rgba(0, 255, 196, 1)">通过</div>
            <div v-if="item.handleResult === 2" style="color:rgba(0, 255, 196, 1)">不通过</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">审核人员：</div><div class="content text-ellipsis">{{item.auditUserName}}</div>
              </div>
              <div class="info-item">
                <div class="flex-center" :class="{'active-color': item.handleWay === 1}" style="margin-right: 0.375rem"><i class="circle" :class="{'active': item.handleWay === 1}" style="margin-right: 0.075rem"></i>本公司处理</div>
                <div class="flex-center" :class="{'active-color': item.handleWay === 2}"><i class="circle" :class="{'active': item.handleWay === 2}" style="margin-right: 0.075rem"></i> 第三方公司处理</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">审核意见：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_03'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>处理工单</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">处理人员：</div><div class="content text-ellipsis">{{item.auditUserName}}</div>
              </div>
              <div class="info-item">
                <div class="label">处理结果：</div>
                <div class="content">
                  <span v-if="item.handleResult === 3">已修复</span>
                  <span v-if="item.handleResult === 4">未修复</span>
                </div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">处理内容：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'defect_treatment_04'" :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>处理审核</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
            <div v-if="item.handleResult === 1" style="color:rgba(0, 255, 196, 1)">通过</div>
            <div v-if="item.handleResult === 2" style="color:rgba(0, 255, 196, 1)">不通过</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">审核人员：</div><div class="content text-ellipsis">{{item.auditUserName}}</div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">处理审核：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timeline-item" v-if="item.actNodeCode === 'wb_node_02'"  :key="index">
          <div class="item-title">
            <i class="circle active"></i>
            <div>处理工单(维保人员)</div>
            <div class="time" v-if="item.createTime">{{item.createTime}}</div>
          </div>
          <div class="info-box">
            <div class="info-row">
              <div class="info-item">
                <div class="label">处理人员：</div><div class="content text-ellipsis">{{item.auditUserName}}</div>
              </div>
              <div class="info-item">
                <div class="label">处理结果：</div>
                <div class="content">
                  <span v-if="item.handleResult === 3">已修复</span>
                  <span v-if="item.handleResult === 4">未修复</span>
                </div>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item long">
                <div class="label">处理内容：</div><div class="content infoDiv">{{item.handleOpinion}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>

    </div>

    <!-- 现场解决工单详情 -->
    <div class="timeline-container" v-if="detail.handleMethod === 2">
      <div class="timeline-item" style="height: 0.5rem;">
        <div class="item-title">
          <i class="circle active"></i>
          <div class="step">完成</div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="item-title">
          <i class="circle active"></i>
          <div>上报内容</div>
          <div class="time" v-if="detail.createTime">{{detail.createTime}}</div>
        </div>
        <div class="info-box">
          <div class="info-row">
            <div class="info-item">
              <div class="label">所属单位：</div><div class="content text-ellipsis">{{detail.deptName}}</div>
            </div>
            <div class="info-item">
              <div class="label">设备类型：</div><div class="content">{{detail.deviceTypeName}}</div>
            </div>
            <div class="info-item">
              <div class="label">设备状态：</div><div class="content">{{detail.deviceStatusName}}</div>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <div class="label">处理方式：</div>
              <div class="content">现场处理</div>
            </div>
            <div class="info-item">
              <div class="label">上报人：</div><div class="content">{{detail.createUserName}}</div>
            </div>
            <div class="info-item">
              <div class="label">联系方式：</div><div class="content">{{detail.createUserPhone}}</div>
            </div>
          </div>
          <div class="info-row" v-if="detail.reportImgs">
            <div class="image-box">
              <el-image
                v-for="(img, idx) in detail.reportImgs.split(',')"
                class="img"
                :key="idx"
                :src="urlText+'/admin/sys-file/' + img"
                :alt="img"
                :preview-src-list="[urlText+'/admin/sys-file/' + img]"
                :z-index="998"
              >
              </el-image>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label" style="width:1.25rem;">现场处理内容：</div><div class="content infoDiv">{{detail.handleContent}}</div>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item long">
              <div class="label" style="width:1.25rem;">现场处理意见：</div><div class="content infoDiv">{{detail.handleOpinion}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>

// 设备告警隐患详情
export default {
  name: 'deviceAlarmDetail',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    step: {
      type: Number,
      default: 1
    },
    detail: {
      type: Object,
      default: function() {
        return {}
      }
    },
    history: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      urlText:uni.getStorageSync('urlText')
    }
  },
  computed: {
    show: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    open() {

    }
  },
}
</script>

<style lang="scss" scoped>
.info-row{

  .info-item{
    .label{
     color: #B8BDC1 !important;
    }
    .content{
    color:rgba(255, 255, 255,0.9)!important;
  }
  }
}
.content{
   color: rgba(255, 255, 255,0.9)!important;
}

</style>
